Frontend Architecture

**Referenced Files in This Document** - [src/assets/js/main.js](file://src/assets/js/main.js) - [src/assets/js/modules/navigation.js](file://src/assets/js/modules/navigation.js) - [src/assets/js/modules/carousel-system.js](file://src/assets/js/modules/carousel-system.js) - [src/assets/js/modules/theme-toggling.js](file://src/assets/js/modules/theme-toggling.js) - [src/assets/js/modules/search-functionality.js](file://src/assets/js/modules/search-functionality.js) - [src/assets/js/modules/material-design-3-main-theme-toggle.js](file://src/assets/js/modules/material-design-3-main-theme-toggle.js) - [src/assets/js/modules/accordion.js](file://src/assets/js/modules/accordion.js) - [src/assets/js/modules/team-card-flip.js](file://src/assets/js/modules/team-card-flip.js) - [src/assets/js/modules/poll-bar-animation.js](file://src/assets/js/modules/poll-bar-animation.js) - [src/assets/js/modules/scroll-nav-polish.js](file://src/assets/js/modules/scroll-nav-polish.js) - [src/assets/js/modules/hero-animations.js](file://src/assets/js/modules/hero-animations.js) - [src/assets/js/modules/custom-cursor.js](file://src/assets/js/modules/custom-cursor.js) - [src/assets/js/modules/iaa-alliance-theme-toggle.js](file://src/assets/js/modules/iaa-alliance-theme-toggle.js) - [src/assets/js/modules/newsletter-spam-protection.js](file://src/assets/js/modules/newsletter-spam-protection.js) - [src/assets/css/main.css](file://src/assets/css/main.css) - [src/assets/css/modules/38-material-design-3-theme-toggle.css](file://src/assets/css/modules/38-material-design-3-theme-toggle.css) - [src/assets/css/modules/41-search-modal.css](file://src/assets/css/modules/41-search-modal.css) - [src/assets/css/modules/25-responsive-tablet-max-width-1024px.css](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css) - [src/assets/css/modules/26-responsive-mobile-max-width-900px.css](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css) - [src/assets/css/modules/44-knowledge-base.css](file://src/assets/css/modules/44-knowledge-base.css) - [src/_includes/macros/case-study-card.njk](file://src/_includes/macros/case-study-card.njk) - [src/_includes/macros/news-article-card.njk](file://src/_includes/macros/news-article-card.njk) - [src/_includes/macros/service-capability-card.njk](file://src/_includes/macros/service-capability-card.njk)

Table of Contents

  1. Introduction
  2. Project Structure
  3. Core Components
  4. Architecture Overview
  5. Detailed Component Analysis
  6. Dependency Analysis
  7. Performance Considerations
  8. Troubleshooting Guide
  9. Conclusion
  10. Appendices

Introduction

This document explains the frontend architecture and component system of the project. It covers the modular JavaScript initialization, the CSS architecture with 44 style modules, the responsive design system (mobile-first with multiple breakpoints), the component library built with Nunjucks macros, and the Material Design 3 implementation with theme switching. Practical usage examples, composition patterns, customization options, performance considerations, and extension guidelines are included to help developers build and maintain interactive, accessible, and performant UI features.

Project Structure

The frontend is organized around a modular JavaScript entry point that initializes feature modules, and a CSS entry that composes 44 individual style modules. Nunjucks macros define reusable UI components across pages. The responsive system applies breakpoint-specific rules to adapt layouts and typography across devices.

graph TB
JSMain["JavaScript Entry<br/>src/assets/js/main.js"]
CSSMain["CSS Entry<br/>src/assets/css/main.css"]
subgraph "JS Modules"
Nav["navigation.js"]
ThemeToggle["material-design-3-main-theme-toggle.js"]
ThemeToggling["theme-toggling.js"]
Search["search-functionality.js"]
Carousel["carousel-system.js"]
Accordion["accordion.js"]
TeamFlip["team-card-flip.js"]
PollAnim["poll-bar-animation.js"]
ScrollNav["scroll-nav-polish.js"]
Hero["hero-animations.js"]
Cursor["custom-cursor.js"]
IAA["iaa-alliance-theme-toggle.js"]
Spam["newsletter-spam-protection.js"]
end
subgraph "CSS Modules"
MD3["38-material-design-3-theme-toggle.css"]
SearchCSS["41-search-modal.css"]
Tablet["25-responsive-tablet-max-width-1024px.css"]
Mobile["26-responsive-mobile-max-width-900px.css"]
KB["44-knowledge-base.css"]
end
Macros["Nunjucks Macros<br/>case-study-card.njk<br/>news-article-card.njk<br/>service-capability-card.njk"]
JSMain --> Nav
JSMain --> ThemeToggle
JSMain --> ThemeToggling
JSMain --> Search
JSMain --> Carousel
JSMain --> Accordion
JSMain --> TeamFlip
JSMain --> PollAnim
JSMain --> ScrollNav
JSMain --> Hero
JSMain --> Cursor
JSMain --> IAA
JSMain --> Spam
CSSMain --> MD3
CSSMain --> SearchCSS
CSSMain --> Tablet
CSSMain --> Mobile
CSSMain --> KB
Macros --> |"Rendered on Pages"| JSMain
Macros --> |"Rendered on Pages"| CSSMain

Diagram sources

  • [src/assets/js/main.js:1-37](file://src/assets/js/main.js#L1-L37)
  • [src/assets/css/main.css:1-47](file://src/assets/css/main.css#L1-L47)
  • [src/assets/css/modules/38-material-design-3-theme-toggle.css:1-237](file://src/assets/css/modules/38-material-design-3-theme-toggle.css#L1-L237)
  • [src/assets/css/modules/41-search-modal.css:1-314](file://src/assets/css/modules/41-search-modal.css#L1-L314)
  • [src/assets/css/modules/25-responsive-tablet-max-width-1024px.css:1-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L1-L333)
  • [src/assets/css/modules/26-responsive-mobile-max-width-900px.css:1-358](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L1-L358)
  • [src/assets/css/modules/44-knowledge-base.css:1-375](file://src/assets/css/modules/44-knowledge-base.css#L1-L375)
  • [src/_includes/macros/case-study-card.njk:1-20](file://src/_includes/macros/case-study-card.njk#L1-L20)
  • [src/_includes/macros/news-article-card.njk:1-35](file://src/_includes/macros/news-article-card.njk#L1-L35)
  • [src/_includes/macros/service-capability-card.njk:1-11](file://src/_includes/macros/service-capability-card.njk#L1-L11)

Section sources

  • [src/assets/js/main.js:1-37](file://src/assets/js/main.js#L1-L37)
  • [src/assets/css/main.css:1-47](file://src/assets/css/main.css#L1-L47)

Core Components

This section outlines the primary interactive modules and their responsibilities, along with the CSS modules that implement Material Design 3 and responsive behavior.

  • Navigation module: Handles mobile menu open/close, focus trapping, keyboard navigation, and outside clicks.
  • Carousel system: Implements swipeable, keyboard-accessible, and dot-indicated carousels for capabilities, testimonials, and news.
  • Theme toggling: Manages global theme preference persistence and state classes.
  • Search functionality: Integrates Pagefind for client-side search with modal UI, keyboard navigation, and debounced input.
  • Material Design 3 theme toggle: Defines MD3 color tokens and renders a themed switch with icons and transitions.
  • Additional modules: Accordion, team card flip, poll bar animation, scroll polish, hero animations, custom cursor, IAA theme toggle, and newsletter spam protection.

Practical usage examples:

  • Initialize all features by calling the initializer functions exported by each module from the main entry.
  • Apply carousel behavior by ensuring DOM elements match the expected selectors and IDs.
  • Persist theme preferences via local storage and reflect them with body classes.

Section sources

  • [src/assets/js/modules/navigation.js:1-78](file://src/assets/js/modules/navigation.js#L1-L78)
  • [src/assets/js/modules/carousel-system.js:1-169](file://src/assets/js/modules/carousel-system.js#L1-L169)
  • [src/assets/js/modules/theme-toggling.js:1-24](file://src/assets/js/modules/theme-toggling.js#L1-L24)
  • [src/assets/js/modules/search-functionality.js:1-179](file://src/assets/js/modules/search-functionality.js#L1-L179)
  • [src/assets/js/modules/material-design-3-main-theme-toggle.js:1-38](file://src/assets/js/modules/material-design-3-main-theme-toggle.js#L1-L38)
  • [src/assets/js/main.js:1-37](file://src/assets/js/main.js#L1-L37)

Architecture Overview

The frontend follows a modular initialization pattern: the main JavaScript file imports and invokes feature-specific modules. The CSS entry composes 44 style modules, enabling a highly organized and maintainable stylesheet. Responsive behavior is layered across multiple media queries, and component rendering is handled by Nunjucks macros.

sequenceDiagram
participant Browser as "Browser"
participant JSMain as "main.js"
participant Nav as "navigation.js"
participant Theme as "material-design-3-main-theme-toggle.js"
participant Search as "search-functionality.js"
participant Car as "carousel-system.js"
Browser->>JSMain : Load page
JSMain->>Nav : initNavigation()
JSMain->>Theme : initThemeToggle()
JSMain->>Search : initSearch()
JSMain->>Car : initCarousels()
Note over JSMain,Car : Other modules initialized similarly

Diagram sources

  • [src/assets/js/main.js:15-36](file://src/assets/js/main.js#L15-L36)
  • [src/assets/js/modules/navigation.js:3-75](file://src/assets/js/modules/navigation.js#L3-L75)
  • [src/assets/js/modules/material-design-3-main-theme-toggle.js:3-34](file://src/assets/js/modules/material-design-3-main-theme-toggle.js#L3-L34)
  • [src/assets/js/modules/search-functionality.js:3-175](file://src/assets/js/modules/search-functionality.js#L3-L175)
  • [src/assets/js/modules/carousel-system.js:3-165](file://src/assets/js/modules/carousel-system.js#L3-L165)

Detailed Component Analysis

Navigation Module

Responsibilities:

  • Toggle mobile menu with accessibility attributes and focus management.
  • Close on escape, click outside, or selecting a link.
  • Trap focus within the menu while open.

Accessibility highlights:

  • Uses ARIA attributes for expanded state and labels.
  • Focus trapping with Tab key handling.
  • Keyboard navigation support.
flowchart TD
Start(["initNavigation"]) --> Query["Query toggle and menu elements"]
Query --> Exists{"Both elements present?"}
Exists --> |No| Exit["Return early"]
Exists --> |Yes| Bind["Bind click handlers"]
Bind --> Click{"Toggle clicked?"}
Click --> |Yes| Open["Add active classes<br/>set aria-expanded=true<br/>focus first link"]
Click --> |No| Close["Remove active classes<br/>set aria-expanded=false<br/>restore focus"]
Open --> Outside["Listen for Escape and outside clicks"]
Close --> Outside
Outside --> FocusTrap["Focus trap with Tab/Shift+Tab"]
FocusTrap --> End(["Ready"])

Diagram sources

  • [src/assets/js/modules/navigation.js:3-75](file://src/assets/js/modules/navigation.js#L3-L75)

Section sources

  • [src/assets/js/modules/navigation.js:1-78](file://src/assets/js/modules/navigation.js#L1-L78)

Carousel System

Responsibilities:

  • Configure multiple carousels with previous/next buttons and optional dots.
  • Compute snap points based on viewport width and item sizing.
  • Smooth horizontal scrolling with keyboard and mouse/touch support.
  • Update dot indicators and button opacity based on scroll position.
flowchart TD
Init(["initCarousels"]) --> Configs["Define carousel configs"]
Configs --> Setup["setupCarousel(cfg)"]
Setup --> Query["Find viewport and buttons"]
Query --> Items["Resolve track and children"]
Items --> Dots["Render dots and compute snap points"]
Dots --> Scroll["Attach scroll and resize listeners"]
Scroll --> Keys["Handle arrow keys"]
Scroll --> Drag["Handle mousedown/mousemove/mouseup"]
Keys --> Update["Update state and dot selection"]
Drag --> Update
Update --> End(["Ready"])

Diagram sources

  • [src/assets/js/modules/carousel-system.js:3-165](file://src/assets/js/modules/carousel-system.js#L3-L165)

Section sources

  • [src/assets/js/modules/carousel-system.js:1-169](file://src/assets/js/modules/carousel-system.js#L1-L169)

Theme Toggling (Material Design 3)

Responsibilities:

  • Persist theme preference in local storage.
  • Toggle body classes for light/dark themes.
  • Reflect state via ARIA attributes for assistive technologies.
flowchart TD
Start(["initThemeToggle"]) --> Query["Query .theme-toggle"]
Query --> Exists{"Element exists?"}
Exists --> |No| Exit["Return early"]
Exists --> |Yes| Load["Load saved preference"]
Load --> Apply["Apply theme classes and ARIA"]
Apply --> Click["Bind click handler"]
Click --> Switch["Toggle theme and save"]
Switch --> Update["Update classes and ARIA"]
Update --> End(["Ready"])

Diagram sources

  • [src/assets/js/modules/material-design-3-main-theme-toggle.js:3-34](file://src/assets/js/modules/material-design-3-main-theme-toggle.js#L3-L34)

Section sources

  • [src/assets/js/modules/material-design-3-main-theme-toggle.js:1-38](file://src/assets/js/modules/material-design-3-main-theme-toggle.js#L1-L38)

Search Functionality (Pagefind)

Responsibilities:

  • Lazy-load Pagefind on demand.
  • Open/close modal with overlay and focus management.
  • Debounced search input, keyboard navigation (arrow keys, Enter, Escape).
  • Categorize and render results with excerpts and icons.
sequenceDiagram
participant User as "User"
participant Search as "search-functionality.js"
participant PF as "Pagefind"
User->>Search : Click ".search-toggle"
Search->>Search : openModal()
Search->>PF : import('/pagefind/pagefind.js')
User->>Search : Type in "#search-input"
Search->>Search : Debounce 200ms
Search->>PF : search(query)
PF-->>Search : results[]
Search->>Search : Render results and meta
User->>Search : ArrowUp/ArrowDown/Enter
Search->>Search : updateSelection() and navigate
User->>Search : Press Escape or overlay click
Search->>Search : closeModal()

Diagram sources

  • [src/assets/js/modules/search-functionality.js:3-175](file://src/assets/js/modules/search-functionality.js#L3-L175)

Section sources

  • [src/assets/js/modules/search-functionality.js:1-179](file://src/assets/js/modules/search-functionality.js#L1-L179)

CSS Architecture and Material Design 3

The CSS entry imports 44 modules that encapsulate concerns such as variables/reset, global utilities, navigation, carousels, forms, footers, responsive breakpoints, reduced motion, and theme toggles. Material Design 3 is implemented via color tokens and elevation variables, with a themed toggle component that adapts to light/dark modes.

Key modules:

  • 38-material-design-3-theme-toggle.css: Defines MD3 color tokens and theme-aware UI for the toggle.
  • 41-search-modal.css: Implements the search modal UI with theme-aware overlays and typography.
  • 25-responsive-tablet-max-width-1024px.css and 26-responsive-mobile-max-width-900px.css: Provide device-specific adjustments for navigation, carousels, grids, and typography.
  • 44-knowledge-base.css: Styles the knowledge base with tag filtering, cards, and prose.
graph LR
CSSMain["main.css"]
MD3["38-material-design-3-theme-toggle.css"]
SearchCSS["41-search-modal.css"]
Tablet["25-responsive-tablet-max-width-1024px.css"]
Mobile["26-responsive-mobile-max-width-900px.css"]
KB["44-knowledge-base.css"]
CSSMain --> MD3
CSSMain --> SearchCSS
CSSMain --> Tablet
CSSMain --> Mobile
CSSMain --> KB

Diagram sources

  • [src/assets/css/main.css:3-46](file://src/assets/css/main.css#L3-L46)
  • [src/assets/css/modules/38-material-design-3-theme-toggle.css:6-33](file://src/assets/css/modules/38-material-design-3-theme-toggle.css#L6-L33)
  • [src/assets/css/modules/41-search-modal.css:34-92](file://src/assets/css/modules/41-search-modal.css#L34-L92)
  • [src/assets/css/modules/25-responsive-tablet-max-width-1024px.css:6-186](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L6-L186)
  • [src/assets/css/modules/26-responsive-mobile-max-width-900px.css:6-356](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L6-L356)
  • [src/assets/css/modules/44-knowledge-base.css:6-150](file://src/assets/css/modules/44-knowledge-base.css#L6-L150)

Section sources

  • [src/assets/css/main.css:1-47](file://src/assets/css/main.css#L1-L47)
  • [src/assets/css/modules/38-material-design-3-theme-toggle.css:1-237](file://src/assets/css/modules/38-material-design-3-theme-toggle.css#L1-L237)
  • [src/assets/css/modules/41-search-modal.css:1-314](file://src/assets/css/modules/41-search-modal.css#L1-L314)
  • [src/assets/css/modules/25-responsive-tablet-max-width-1024px.css:1-333](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L1-L333)
  • [src/assets/css/modules/26-responsive-mobile-max-width-900px.css:1-358](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L1-L358)
  • [src/assets/css/modules/44-knowledge-base.css:1-375](file://src/assets/css/modules/44-knowledge-base.css#L1-L375)

Component Library (Nunjucks Macros)

Reusable macros provide consistent markup and styling for common UI elements:

  • Case study card macro: Renders a card with image, category, client, title, quote, and content.
  • News article card macro: Supports carousel and expanded variants with lazy loading and optional details.
  • Service capability card macro: Displays service cards with image, title, body, and link.

Usage patterns:

  • Import macros into templates and call the macro with an item object.
  • Customize variants via macro parameters (e.g., news card variant).
  • Leverage CSS modules for consistent styling across themes and breakpoints.

Section sources

  • [src/_includes/macros/case-study-card.njk:1-20](file://src/_includes/macros/case-study-card.njk#L1-L20)
  • [src/_includes/macros/news-article-card.njk:1-35](file://src/_includes/macros/news-article-card.njk#L1-L35)
  • [src/_includes/macros/service-capability-card.njk:1-11](file://src/_includes/macros/service-capability-card.njk#L1-L11)

Dependency Analysis

The main JavaScript entry orchestrates initialization of all feature modules. CSS composition relies on the main stylesheet importing modular CSS files. There are no circular dependencies among modules; each module exports a single initializer and is imported by the entry point.

graph TB
JSMain["main.js"]
Nav["navigation.js"]
Theme["material-design-3-main-theme-toggle.js"]
ThemeObs["theme-toggling.js"]
Search["search-functionality.js"]
Car["carousel-system.js"]
Acc["accordion.js"]
Team["team-card-flip.js"]
Poll["poll-bar-animation.js"]
ScrollNav["scroll-nav-polish.js"]
Hero["hero-animations.js"]
Cursor["custom-cursor.js"]
IAA["iaa-alliance-theme-toggle.js"]
Spam["newsletter-spam-protection.js"]
JSMain --> Nav
JSMain --> Theme
JSMain --> ThemeObs
JSMain --> Search
JSMain --> Car
JSMain --> Acc
JSMain --> Team
JSMain --> Poll
JSMain --> ScrollNav
JSMain --> Hero
JSMain --> Cursor
JSMain --> IAA
JSMain --> Spam

Diagram sources

  • [src/assets/js/main.js:1-37](file://src/assets/js/main.js#L1-L37)

Section sources

  • [src/assets/js/main.js:1-37](file://src/assets/js/main.js#L1-L37)

Performance Considerations

  • Lazy loading and progressive enhancement:
    • Animations (GSAP/ScrollTrigger) are conditionally registered only when globals are present, avoiding runtime errors and ensuring core features remain functional without heavy libraries.
    • Search module lazily imports Pagefind to defer asset loading until the modal is opened.
  • Asset optimization:
    • CSS is composed from 44 modular files; keep selectors scoped and avoid duplication to minimize bundle size.
    • Use lazy loading on images within cards and carousels to reduce initial payload.
  • Accessibility and UX:
    • Focus management and ARIA attributes improve perceived performance by reducing cognitive overhead.
    • Debounced search input reduces unnecessary computations during typing.
  • Progressive enhancement:
    • Carousels degrade gracefully when JavaScript is disabled; basic scrolling remains usable.
    • Theme toggles persist preferences without requiring server round-trips.

Section sources

  • [src/assets/js/main.js:28-35](file://src/assets/js/main.js#L28-L35)
  • [src/assets/js/modules/search-functionality.js:18-28](file://src/assets/js/modules/search-functionality.js#L18-L28)

Troubleshooting Guide

Common issues and resolutions:

  • Navigation not opening on mobile:
    • Verify presence of toggle and menu elements and that event listeners are attached after DOMContentLoaded.
    • Confirm that the active class and ARIA attributes are being toggled.
  • Carousels not updating dots or snapping:
    • Ensure viewport and track elements exist and that resize/scroll listeners are attached.
    • Check computed item width and gap values; adjust CSS if items are misaligned.
  • Search modal not appearing:
    • Confirm the modal and toggle elements exist and that Pagefind loads successfully.
    • Verify keyboard shortcuts and overlay click handlers are bound.
  • Theme toggle not persisting:
    • Check local storage availability and that body classes are applied on load.
    • Ensure ARIA attributes reflect the current theme state.

Section sources

  • [src/assets/js/modules/navigation.js:3-75](file://src/assets/js/modules/navigation.js#L3-L75)
  • [src/assets/js/modules/carousel-system.js:13-165](file://src/assets/js/modules/carousel-system.js#L13-L165)
  • [src/assets/js/modules/search-functionality.js:3-175](file://src/assets/js/modules/search-functionality.js#L3-L175)
  • [src/assets/js/modules/material-design-3-main-theme-toggle.js:3-34](file://src/assets/js/modules/material-design-3-main-theme-toggle.js#L3-L34)

Conclusion

The frontend architecture emphasizes modularity, accessibility, and scalability. The JavaScript entry initializes cohesive feature modules, while the CSS entry composes 44 specialized modules to deliver a robust, theme-aware, and responsive interface. Nunjucks macros enable consistent component rendering across pages. By following the provided patterns and performance guidance, teams can confidently extend the system with new interactive features and maintain a high-quality user experience.

Appendices

Responsive Design System

  • Breakpoints:
    • Tablet: up to 1024px
    • Mobile: up to 900px
    • Small mobile: up to 600px
    • Extra small: up to 480px
  • Approach:
    • Mobile-first with layered enhancements.
    • Adjust typography, spacing, grid layouts, and navigation affordances per breakpoint.
    • Use clamp() and relative units for scalable typography and spacing.

Section sources

  • [src/assets/css/main.css:27-30](file://src/assets/css/main.css#L27-L30)
  • [src/assets/css/modules/25-responsive-tablet-max-width-1024px.css:6-330](file://src/assets/css/modules/25-responsive-tablet-max-width-1024px.css#L6-L330)
  • [src/assets/css/modules/26-responsive-mobile-max-width-900px.css:6-356](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L6-L356)

Practical Examples and Composition Patterns

  • Navigation:
    • Add a toggle element with class .nav-toggle and a menu with class .nav-menu.
    • Ensure first link is focusable when the menu opens.
  • Carousel:
    • Provide an element with the track ID and previous/next buttons with matching IDs.
    • Optionally include a dots container to render pagination.
  • Search:
    • Include a toggle with class .search-toggle and a modal with class .search-modal.
    • Bind input, clear, and overlay events to the provided handlers.
  • Cards and Components:
    • Use macros to render cards with item data and optional variants.
    • Apply lazy loading on images for performance.

Section sources

  • [src/assets/js/modules/navigation.js:3-75](file://src/assets/js/modules/navigation.js#L3-L75)
  • [src/assets/js/modules/carousel-system.js:3-165](file://src/assets/js/modules/carousel-system.js#L3-L165)
  • [src/assets/js/modules/search-functionality.js:3-175](file://src/assets/js/modules/search-functionality.js#L3-L175)
  • [src/_includes/macros/case-study-card.njk:1-20](file://src/_includes/macros/case-study-card.njk#L1-L20)
  • [src/_includes/macros/news-article-card.njk:1-35](file://src/_includes/macros/news-article-card.njk#L1-L35)
  • [src/_includes/macros/service-capability-card.njk:1-11](file://src/_includes/macros/service-capability-card.njk#L1-L11)

Extending the Component System

  • New interactive feature:
    • Create a new module under src/assets/js/modules/ with a single initializer function.
    • Export the function and import it in main.js, invoking it in the DOMContentLoaded handler.
    • Keep DOM selectors explicit and documented.
  • New CSS module:
    • Add a new file under src/assets/css/modules/ with a descriptive name.
    • Import it in main.css and organize by function (navigation, carousels, forms, etc.).
    • Scope selectors and reuse MD3 tokens for consistency.
  • New macro:
    • Add a new macro in src/_includes/macros/ and import it into templates.
    • Pass data objects with consistent keys to ensure composability.

Section sources

  • [src/assets/js/main.js:1-37](file://src/assets/js/main.js#L1-L37)
  • [src/assets/css/main.css:3-46](file://src/assets/css/main.css#L3-L46)